<template>
  <el-card>
    <div class="Htop">
      <div class="block">
        <span>{{ this.resisdentNum }}</span>
        <p>常驻居民</p>
        <svg t="1703074978897" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="18055" width="32" height="32">
          <path
            d="M767.23 482.61c35.1-31.02 57.35-75.93 57.35-126 0-86.84-65.08-158.94-151.38-167.72-17.47-1.77-33.28 11.03-35.08 28.61-1.78 17.58 11.03 33.28 28.61 35.06 53.5 5.45 93.84 50.17 93.84 104.05 0 53.31-39.88 97.98-92.75 103.92-11.64 1.3-20.63 8.96-25.12 18.91-0.04 0.08-0.08 0.15-0.12 0.22-1.24 2.8-1.94 5.7-2.33 8.82-0.2 1.16-0.82 2.15-0.88 3.35-0.05 0.89 0.35 1.66 0.37 2.53 0.03 0.53-0.19 1-0.13 1.53 0.09 0.8 0.53 1.44 0.68 2.21 2.18 14.73 13.84 26.58 29.28 27.44 119.3 6.59 216.69 101.45 226.55 220.66 1.38 16.72 15.38 29.36 31.86 29.36 0.88 0 1.77-0.03 2.67-0.11 17.61-1.45 30.7-16.91 29.25-34.53-9.75-117.84-87.27-216.63-192.67-258.31z"
            fill="#333333" p-id="18056"></path>
          <path
            d="M536.12 499.11c44.15-35.34 72.55-89.57 72.55-150.39 0-106.25-86.44-192.69-192.67-192.69s-192.67 86.44-192.67 192.69c0 60.81 28.4 115.05 72.55 150.39C170 545.37 75.68 661.55 64.11 801.33c-1.45 17.61 11.64 33.08 29.25 34.53 18.06 1.56 33.08-11.66 34.53-29.25C140.19 657.89 266.75 541.39 416 541.39s275.81 116.5 288.11 265.22c1.38 16.72 15.38 29.36 31.86 29.36 0.88 0 1.77-0.03 2.67-0.11 17.61-1.45 30.7-16.92 29.25-34.53C756.32 661.55 662 545.37 536.12 499.11zM287.33 348.72c0-70.95 57.72-128.69 128.67-128.69s128.67 57.73 128.67 128.69S486.95 477.39 416 477.39s-128.67-57.72-128.67-128.67z"
            fill="#333333" p-id="18057"></path>
        </svg>
      </div>
      <div class="block">
        <span>{{ this.recordNum }}</span>
        <p>健康档案数</p>
        <svg t="1703074754008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="12533" width="32" height="32">
          <path
            d="M935.873 232.997 730.023 10.165C724.018 3.687 715.603 0 706.788 0L370.249 0c-48.98 0-88.815 39.837-88.815 88.802l0 40.79 63.317 0 0-40.79c0-14.055 11.445-25.477 25.497-25.477l310.169 0 0 215.884c0 8.165 6.62 14.785 14.78 14.785l185.765 0 0 478.244c0 14.065-11.445 25.48-25.5 25.48l-79.3 0 0 63.33 79.3 0c48.965 0 88.825-39.845 88.825-88.81L944.287 254.479C944.288 246.499 941.273 238.839 935.873 232.997zM709.988 81.775l168.74 182.645-168.74 0L709.988 81.775zM530.619 173.137c-6.005-6.477-14.44-10.182-23.26-10.182L170.8 162.955c-48.96 0-88.777 39.837-88.777 88.797l0 683.431c0 48.98 39.817 88.815 88.777 88.815l485.239 0c48.96 0 88.82-39.835 88.82-88.815L744.859 417.416c0-7.943-2.99-15.622-8.42-21.467L530.619 173.137zM668.548 415.746l-142.49 0 0-154.24L668.548 415.746zM656.038 960.673 170.8 960.673c-14.05 0-25.46-11.425-25.46-25.49L145.34 251.752c0-14.052 11.405-25.477 25.46-25.477l322.712 0 2.972 3.217 0 201.017c0 8.165 6.617 14.767 14.785 14.767l170.265 0 0 489.901C681.533 949.248 670.088 960.673 656.038 960.673zM576.224 808.383 229.217 808.383c-6.302 0-11.415 5.085-11.415 11.425 0 6.3 5.112 11.4 11.415 11.4l347.007 0c6.315 0 11.425-5.1 11.425-11.4C587.648 813.468 582.539 808.383 576.224 808.383zM576.224 713.928 229.217 713.928c-6.302 0-11.415 5.125-11.415 11.44 0 6.3 5.112 11.385 11.415 11.385l347.007 0c6.315 0 11.425-5.085 11.425-11.385C587.648 719.053 582.539 713.928 576.224 713.928zM576.224 619.513 229.217 619.513c-6.302 0-11.415 5.125-11.415 11.435 0 6.3 5.112 11.41 11.415 11.41l347.007 0c6.315 0 11.425-5.11 11.425-11.41S582.539 619.513 576.224 619.513zM229.217 550.099l158.73 0c6.318 0 11.412-5.095 11.412-11.39 0-6.3-5.095-11.425-11.412-11.425l-158.73 0c-6.302 0-11.415 5.125-11.415 11.425C217.799 545.004 222.914 550.099 229.217 550.099zM269.704 362.162c0 4.462 3.402 8.072 7.59 8.072 0.052 0 0.087 0 0.147 0 1.563 21.257 18.295 42.515 38.74 42.515 20.442 0 37.192-21.257 38.76-42.515 0.038 0 0.09 0 0.135 0 4.202 0 7.6-3.607 7.6-8.072 0-3.277-1.855-6.09-4.505-7.342 1.545-4.775 2.38-9.89 2.38-15.207 0-25.99-19.847-47.062-44.37-47.062-24.505 0-44.362 21.07-44.362 47.062 0 5.317 0.842 10.432 2.38 15.207C271.539 356.072 269.704 358.884 269.704 362.162zM221.932 488.116l188.507 0c2.283 0 4.14-1.835 4.14-4.13l0-14.767c0-1.105-0.457-2.19-1.255-2.965-18.115-17.582-40.24-29.997-64.03-35.942-0.603-0.31-1.273-0.497-1.97-0.497l-2.15 0c-0.688 0-1.353 0.167-1.957 0.487-7.177 3.848-17.042 6.065-27.035 6.065-9.995 0-19.84-2.215-27.025-6.065-0.605-0.32-1.26-0.487-1.952-0.487l-1.56 0c-0.328 0-0.65 0.042-0.962 0.105-24.407 5.777-47.102 18.335-65.627 36.335-0.805 0.775-1.25 1.857-1.25 2.965l0 14.767C217.799 486.281 219.647 488.116 221.932 488.116z"
            fill="#272636" p-id="12534"></path>
        </svg>
      </div>
      <div class="block">
        <span>{{ this.nrecordNum }}</span>
        <p>需要建档数</p>
        <svg t="1703075105370" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="19208" width="32" height="32">
          <path
            d="M915.2 0H108.8C76.8 0 48 28.8 48 60.8v902.4c0 32 28.8 60.8 60.8 60.8h588.8l281.6-281.6V60.8c-3.2-32-28.8-60.8-64-60.8zM102.4 963.2V60.8c0-3.2 3.2-6.4 6.4-6.4h806.4c3.2 0 6.4 3.2 6.4 6.4v646.4h-195.2c-38.4 0-67.2 28.8-67.2 67.2v195.2H108.8c-3.2 0-6.4-3.2-6.4-6.4z m777.6-201.6L713.6 928v-153.6c0-6.4 6.4-12.8 12.8-12.8h153.6z"
            p-id="19209"></path>
          <path
            d="M355.2 220.8l-115.2 115.2-35.2-38.4C192 288 176 288 166.4 297.6c-9.6 9.6-9.6 28.8 0 38.4L224 393.6c6.4 6.4 9.6 9.6 19.2 9.6 6.4 0 12.8-3.2 19.2-6.4l134.4-134.4c9.6-9.6 9.6-28.8 0-38.4-12.8-12.8-28.8-12.8-41.6-3.2zM457.6 348.8h355.2c16 0 28.8-9.6 28.8-28.8 0-16-9.6-28.8-28.8-28.8H457.6c-16 0-28.8 9.6-28.8 28.8 0 16 12.8 28.8 28.8 28.8zM812.8 649.6c16 0 28.8-9.6 28.8-28.8 0-16-9.6-28.8-28.8-28.8H457.6c-16 0-28.8 9.6-28.8 28.8 0 16 9.6 28.8 28.8 28.8h355.2zM355.2 521.6L240 640l-38.4-38.4c-9.6-9.6-28.8-9.6-38.4 0-9.6 9.6-9.6 28.8 0 38.4L224 697.6c6.4 6.4 9.6 9.6 19.2 9.6 6.4 0 12.8-3.2 19.2-9.6l134.4-137.6c9.6-9.6 9.6-28.8 0-38.4-12.8-9.6-28.8-9.6-41.6 0z"
            p-id="19210"></path>
        </svg>
      </div>
      <div class="block">
        <span>{{ this.rnrate }}</span>
        <p>建档率</p>
        <svg t="1703075166456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="21082" width="32" height="32">
          <path
            d="M710.419692 714.673231L588.327385 842.830769c-9.924923 10.476308-26.072615 10.476308-40.408616-3.150769-12.760615-12.130462-17.408-29.617231-7.483077-40.093538l188.258462-197.71077c10.003692-10.555077 30.562462-12.051692 40.802461-2.363077l192.905847 183.611077c10.24 9.688615 7.089231 28.672-3.938462 40.251077-14.099692 14.808615-31.507692 16.935385-41.747692 7.168L786.116923 705.536l-3.150769 274.116923c-1.260308 15.832615-7.719385 36.076308-31.901539 39.936-28.278154 0-38.990769-25.048615-39.148307-39.305846L710.498462 714.673231zM227.012923 497.742769h496.797539a35.446154 35.446154 0 0 0 0-70.892307H227.012923a35.446154 35.446154 0 0 0 0 70.892307z m0-212.992h213.070769a33.476923 33.476923 0 0 0 35.524923-35.524923 33.476923 33.476923 0 0 0-35.524923-35.446154H227.012923a33.476923 33.476923 0 0 0-35.524923 35.446154 33.476923 33.476923 0 0 0 35.524923 35.446154z m661.267692 6.380308L604.553846 7.325538a25.993846 25.993846 0 0 0-21.504-7.08923H122.092308c-35.761231 0-71.286154 35.446154-71.286154 71.286154v851.495384c0 35.524923 35.446154 71.286154 71.286154 71.286154h422.596923a35.288615 35.288615 0 0 0 0-70.498462h-387.544616a33.476923 33.476923 0 0 1-35.446153-35.524923V106.732308a33.476923 33.476923 0 0 1 35.446153-35.209846h390.380308v226.855384c0 28.356923 28.356923 56.792615 56.871385 56.792616h227.091692v220.238769 2.520615a35.367385 35.367385 0 0 0 70.419692 2.363077h0.708923V319.566769a53.563077 53.563077 0 0 0-14.178461-28.435692h-0.157539z m-234.338461-7.010462a33.476923 33.476923 0 0 1-35.524923-35.446153V120.753231l163.209846 163.288615H653.942154z"
            fill="#000000" opacity=".804" p-id="21083"></path>
        </svg>
      </div>
    </div>
    <div class="Hcenter">
      <div class="lhad">
        <p>已建档居民</p>
        <div class="content">
          <div class="ablock">
            <span style="font-weight: 600">0人</span>
            <span>今日已检测体温总人数</span>
          </div>
          <div class="ablock">
            <span style="font-weight: 600">0人</span>
            <span>本地居民</span>
          </div>
          <div class="ablock">
            <span style="font-weight: 600">0人</span>
            <span>外来居民</span>
          </div>
        </div>
      </div>
      <div class="rneed">
        <p>未建档居民</p>
        <div class="content">
          <div class="ablock">
            <span style="font-weight: 600">0人</span>
            <span>今日已检测体温总人数</span>
          </div>
          <div class="ablock">
            <span style="font-weight: 600">0人</span>
            <span>本地居民</span>
          </div>
          <div class="ablock">
            <span style="font-weight: 600">0人</span>
            <span>外来居民</span>
          </div>
        </div>
      </div>
    </div>
    <div class="HBtag">
      <div class="Notice">
        <div class="bblock">
          <span><svg t="1703078811346" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="10665" width="16" height="16">
              <path
                d="M988.968421 856.926316v-2.694737-2.694737s0-2.694737-2.694737-2.694737c0 0 0-2.694737-2.694737-2.694737l-2.694736-2.694736-2.694737-2.694737c-91.621053-56.589474-180.547368-231.747368-180.547369-498.526316v-242.526316c0-18.863158-16.168421-35.031579-35.031579-35.031579H70.063158c-18.863158 2.694737-35.031579 16.168421-35.031579 35.031579v821.894737c0 18.863158 16.168421 35.031579 35.031579 35.031579h695.242105c18.863158 0 35.031579-16.168421 35.031579-35.031579v-48.505263H970.105263c2.694737 0 5.389474 0 8.084211-2.694737h2.694737c2.694737 0 2.694737-2.694737 5.389473-5.389474 0 0 0-2.694737 2.694737-2.694737v-5.389473z m-350.315789-751.831579h121.263157v237.136842c0 212.884211 61.978947 401.515789 156.294737 495.831579H245.221053C158.989474 781.473684 94.315789 590.147368 72.757895 342.231579V105.094737h565.894737z m121.263157 813.810526H72.757895V584.757895C107.789474 727.578947 161.684211 829.978947 229.052632 870.4H762.610526v48.505263z"
                fill="#101010" p-id="10666"></path>
              <path
                d="M207.494737 460.8h490.442105c10.778947 0 18.863158-8.084211 18.863158-18.863158s-8.084211-18.863158-18.863158-18.863158H207.494737c-10.778947 0-18.863158 8.084211-18.863158 18.863158s8.084211 18.863158 18.863158 18.863158zM207.494737 309.894737h490.442105c10.778947 0 18.863158-8.084211 18.863158-18.863158s-8.084211-18.863158-18.863158-18.863158H207.494737c-10.778947 0-18.863158 8.084211-18.863158 18.863158s8.084211 18.863158 18.863158 18.863158zM207.494737 614.4h369.178947c10.778947 0 18.863158-8.084211 18.863158-18.863158s-8.084211-18.863158-18.863158-18.863158H207.494737c-10.778947 0-18.863158 8.084211-18.863158 18.863158s8.084211 18.863158 18.863158 18.863158z"
                fill="#101010" p-id="10667"></path>
            </svg>通知公告</span>
          <ul>
            <li style="cursor: pointer" v-for="item in type1" :key="item.id" @click="toNoticeDetail(item.id)">
              <a> {{ item.title }}</a>
              <p>{{ item.time }}</p>
            </li>
          </ul>
        </div>
        <div class="bblock">
          <span><svg t="1703079055498" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="12849" width="16" height="16">
              <path
                d="M839.68 0H184.32C128 0 81.92 46.08 81.92 102.4v819.2c0 56.32 46.08 102.4 102.4 102.4h655.36c56.32 0 102.4-46.08 102.4-102.4V102.4c0-56.32-46.08-102.4-102.4-102.4z m-210.432 81.92h102.4v178.688l-25.088-13.824c-8.192-4.608-16.896-6.656-26.112-6.656-9.216 0-17.92 2.56-26.112 6.656l-25.088 13.824V81.92zM860.16 921.6c0 11.264-9.216 20.48-20.48 20.48H184.32c-11.264 0-20.48-9.216-20.48-20.48V102.4c0-11.264 9.216-20.48 20.48-20.48h373.248v236.544c0 17.92 14.848 30.72 30.72 30.72 4.608 0 9.216-1.024 13.824-3.072l64.512-32.256c4.096-2.048 9.216-3.072 13.824-3.072 4.608 0 9.216 1.024 13.824 3.072l64.512 32.256c4.608 2.048 9.216 3.072 13.824 3.072 16.384 0 30.72-12.8 30.72-30.72V81.92h36.352c11.264 0 20.48 9.216 20.48 20.48v819.2z"
                p-id="12850"></path>
              <path
                d="M491.52 389.12H286.72c-22.528 0-40.96 18.432-40.96 40.96s18.432 40.96 40.96 40.96h204.8c22.528 0 40.96-18.432 40.96-40.96s-18.432-40.96-40.96-40.96zM655.36 552.96H286.72c-22.528 0-40.96 18.432-40.96 40.96s18.432 40.96 40.96 40.96h368.64c22.528 0 40.96-18.432 40.96-40.96s-18.432-40.96-40.96-40.96zM655.36 716.8H286.72c-22.528 0-40.96 18.432-40.96 40.96s18.432 40.96 40.96 40.96h368.64c22.528 0 40.96-18.432 40.96-40.96s-18.432-40.96-40.96-40.96z"
                p-id="12851"></path>
            </svg>政策文件</span>
          <ul>
            <li style="cursor: pointer" v-for="item in type2" :key="item.id" @click="toNoticeDetail(item.id)">
              <a>{{ item.title }}</a>
              <p>{{ item.time }}</p>
            </li>
          </ul>
        </div>
        <div class="bblock">
          <span><svg t="1703079091164" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="14811" width="16" height="16">
              <path
                d="M318.464 519.168c6.144 3.072 12.8 4.608 19.456 4.608 9.216 0 18.432-3.072 26.112-8.704l101.376-76.288 101.376 76.288c13.312 9.728 30.72 11.264 45.568 4.096 14.848-7.168 24.064-22.528 24.064-38.912V137.728h-66.56v296.448L497.664 379.904c-18.944-14.336-45.568-14.336-64.512 0L360.96 434.176V137.728h-66.56v342.528c0 16.384 9.216 31.744 24.064 38.912z"
                fill="#FA7268" p-id="14812"></path>
              <path
                d="M826.368 71.168h-609.28c-48.128 0-87.04 38.912-87.04 87.04V865.28c0 48.128 38.912 87.04 87.04 87.04h609.28c48.128 0 87.04-38.912 87.04-87.04V158.208c0-48.128-38.912-87.04-87.04-87.04z m20.48 794.112c0 11.264-9.216 20.48-20.48 20.48h-609.28c-11.264 0-20.48-9.216-20.48-20.48V158.208c0-11.264 9.216-20.48 20.48-20.48h609.792c11.264 0 20.48 9.216 20.48 20.48V865.28z"
                fill="#3E3A39" p-id="14813"></path>
            </svg>帮助中心</span>
          <ul>
            <li style="cursor: pointer" v-for="item in type3" :key="item.id" @click="toNoticeDetail(item.id)">
              <a>{{ item.title }}</a>
              <p>{{ item.time }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import { ElMessage } from "element-plus";
import { queryRecordsCount, queryNotice } from "@/api/home";
export default {
  data() {
    return {
      resisdentNum: "",
      recordNum: "--",
      nrecordNum: "--",
      rnrate: "--",
      queryParams: {},
      type1: [],
      type2: [],
      type3: [],
    };
  },
  created() {
    this.getCount();
    this.getNoticeList();
  },
  methods: {
    getCount() {
      queryRecordsCount().then((res) => {
        this.resisdentNum = res.data.data[0].name;
      });
    },
    getNoticeList() {
      for (let index = 0; index < 3; index++) {
        queryNotice({ type: index }).then((res) => {
          res.data.data.forEach((item) => {
            item.time = item.time.slice(0, 10);
          });
          if (index === 0) {
            this.type1 = res.data.data;
          }
          if (index === 1) {
            this.type2 = res.data.data;
          }
          if (index === 2) {
            this.type3 = res.data.data;
          }
        });
      }
    },

    toNoticeDetail(id) {
      this.$router.push(`/home/detail?param=${id}`);
    },
  },
};
</script>
<style scoped>
.addOne {
  display: flex;
  justify-content: space-around;
}

.TodoList,
.ranking {
  width: 100%;
  height: 35vh;
}

.Htop {
  height: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(216, 226, 236);
}

.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block p {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: rgb(107, 108, 110);
}

.block span {
  font-weight: 600;
  font-size: 15px;
}

.Hcenter {
  border: 3px solid rgb(216, 226, 236);
  height: 100px;
  display: flex;
  flex-direction: row;
}

.content {
  display: flex;
  justify-content: space-around;
}

.ablock {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}

.lhad {
  width: 50%;
  border-right: 3px solid rgb(216, 226, 236);
}

.lhad p,
.rneed p {
  font-size: 16px;
  margin-left: 10px;
}

.rneed {
  width: 50%;
}

.HBtag {
  height: 40vh;
}

.tabs {
  width: 100%;
  height: 45vh;
}

.tabslabel {
  width: 28vw;
  text-align: center;
}

.Notice {
  border: 3px solid rgb(216, 226, 236);
  border-top: 0;
  width: 100%;
  height: 350px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.Notice .bblock {
  width: 33%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-right: 3px solid rgb(216, 226, 236);
}

.Notice .bblock:last-child {
  border-right: 0;
}

.Notice .bblock span {
  width: 200px;
  margin-left: 40px;
  font-size: 18px;
}

.Notice .bblock span svg {
  margin-right: 10px;
}

.Notice .bblock ul {
  list-style: none;
}

.Notice .bblock ul li {
  padding: 5px;
  display: flex;
  height: 30px;
  flex-direction: row;
  justify-content: space-around;
}

.Notice .bblock ul li a {
  color: black;
  text-decoration: none;
  width: 250px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Notice .bblock ul li a:hover {
  color: blue;
}

.Notice .bblock ul li p {
  width: 120px;
  height: 20px;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
